<!-- 点位列表 -->
<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="handleCloseBindWarnStandard" :close-on-click-modal="false" title="点位列表" width="1100px" class="noMargin">
    <div class="filter-container">
      <el-form ref="listQuery" :inline="true" :model="listQuery" class="form-bottom-line" label-width="80px">
        <el-form-item label="" class="fl">
          <ul class="btn-list">
            <li v-for="item in btnExecutorList" :key="item.index"><el-button :class="item.className" type="" @click.native="executor(item.name,item.index)">{{ item.name }}</el-button></li>
          </ul>
        </el-form-item>
        <el-form-item label="" class="fr">
          <el-date-picker
            v-model="date"
            size="small"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateChange"/>
        </el-form-item>
      </el-form>
    </div>
    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      row-key="id"
      max-height="370"
      min-height="370"
      style="height:280px"
      size="small"
      element-loading-text="正在查询中。。。"
      stripe
      border
      fit>
      <el-table-column align="center" label="点位名称" prop="position" />
      <el-table-column align="center" label="报警类型" prop="currentState" />
      <el-table-column align="center" label="报警时间" prop="lastTime" />
      <el-table-column align="center" label="设备类型" prop="mname" />
      <el-table-column align="center" label="所属楼层" prop="floor_name" />
      <el-table-column align="center" label="分区" prop="zone_name" />
      <el-table-column align="center" label="点位路径" prop="point_path" />
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </el-dialog>
</template>
<script>
import { pointsList } from '@/api/internetData'
import { parseTime } from '@/utils/index'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
const obj = {
  '正常点位': 187465693247033,
  '火警点位': 187467797821071,
  '故障点位': 187467827245844,
  '屏蔽点位': 187467853648871
}
const objInfo = {
  '187465693247033': '正常',
  '187467797821071': '火警',
  '187467827245844': '故障',
  '187467853648871': '屏蔽'
}
export default {
  components: {
    Pagination
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    itemData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    positionType: {
      type: String,
      default: () => {
        return '火警点位'
      }
    }
  },
  data() {
    return {
      btnExecutorList: [{
        index: 0,
        name: '火警点位',
        className: 'active'
      }, {
        index: 1,
        name: '故障点位',
        className: 'default'
      }, {
        index: 2,
        name: '屏蔽点位',
        className: 'default'
      }],
      // , {
      //   index: 3,
      //   name: '正常点位',
      //   className: 'default'
      // }
      list: [], // 表格数据
      total: 0,
      listLoading: false,
      date: [],
      // 查询条件
      listQuery: {
        page: 1,
        offset: 20,
        start_time: '',
        end_time: '',
        state: '',
        device_id: ''
      }
    }
  },
  watch: {
    itemData(val) {
      console.log(val)
    },
    positionType(val) {
      if (val === '火警点位') {
        this.executor('火警点位', 0)
      }
      if (val === '故障点位') {
        this.executor('故障点位', 1)
      }
      if (val === '屏蔽点位') {
        this.executor('屏蔽点位', 2)
      }
      console.log(JSON.stringify(this.itemData))
      this.listQuery.device_id = this.itemData.device_id
      this.listQuery.state = obj[val]
      // if (this.listQuery.device_id.length > 0) {
      //   this.getList()
      // }
    }
  },
  created() {
    console.log(this.positionType)
    if (this.positionType === '火警点位') {
      this.executor('火警点位', 0)
    }
    if (this.positionType === '故障点位') {
      this.executor('故障点位', 1)
    }
    if (this.positionType === '屏蔽点位') {
      this.executor('屏蔽点位', 2)
    }
    this.listQuery.device_id = this.itemData.device_id
    this.listQuery.state = obj[this.positionType]
    if (this.listQuery.device_id.length > 0 && this.positionType.length > 0) {
      this.getList()
    }
  },
  methods: {
    dateChange(data) {
      if (data) {
        this.listQuery.start_time = data[0]
        this.listQuery.end_time = data[1]
      } else {
        this.listQuery.start_time = ''
        this.listQuery.end_time = ''
      }
      this.getList()
    },
    executor(name, index) {
      for (var i = 0; i < this.btnExecutorList.length; i++) {
        if (index === i) {
          this.btnExecutorList[i].className = 'active'
        } else {
          this.btnExecutorList[i].className = 'default'
        }
      }
      this.listQuery.state = obj[name]
      this.getList()
    },
    getList() {
      if (this.listQuery.device_id !== '') {
        this.listLoading = true
        pointsList(this.listQuery)
          .then(response => {
            const data = response.data
            if (data.code === 40000) {
              this.list = []
              data.data.data.forEach((item, index) => {
                item.currentState = objInfo[item.currentState]
                item.lastTime = parseTime(item.lastTime * 1000, '{y}-{m}-{d} {h}:{i}:{s}')
                this.list.push(item)
              })
              this.total = parseInt(data.data.total_count)
            } else {
              this.$message.warning(response.data.message)
            }
            this.listLoading = false
          })
          .catch(() => {
            // this.list = []
            this.total = 0
            this.listLoading = false
          })
      }
    },
    // 新增用户方式切换
    addTypeSwitch(data) {
      this.addType = data
    },
    // 关闭弹窗
    handleCancel() {
      this.$emit('getCancel')
    },
    // 关闭弹窗，不可以删这个方法。不用这个方法点击遮罩层关闭会报错
    handleCloseBindWarnStandard() {
      this.$emit('closeBindWarnStandard')
    },
    setTimeoutFn() {
      const that = this
      this.listLoading = true
      setTimeout(function() {
        that.listLoading = false
      }, 1000)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.form-bottom-line{
    overflow: hidden;
}
.btn-list{
  height: 36px;
  li{
    margin-right: 15px;
    float: left;
  }
}
</style>
